<template>
  <div style="padding: 10px">


    <div style="margin: 10px 0">
      <el-button type="primary" @click="updateCard" v-if="user.role === 0">打卡</el-button>
    </div>
    <!--    搜索区域-->
    <el-switch
        v-model="switch1"
        active-text="仅查看未打卡"
        inactive-text="查看全部"
        @change="switchChange"
        style="margin-bottom: 10px"
    >
    </el-switch>

    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%">

      <el-table-column prop="id"
                       label="Id"
                       sortable/>

      <el-table-column prop="stuId"
                       label="学号"/>


      <el-table-column prop="ctime"
                       label="打卡时间"/>

    </el-table>


    <div>
      <!--      分页-->
      <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>

    </div>
  </div>
</template>

<script>

import request from "../utils/request";
import {ElMessage} from "element-plus";

export default {
  name: 'Home',
  components: {},
  data() {
    return {
      currentPage: 1,
      total: 0,
      search: '',
      tableData: [],
      pageSize: 10,
      switch1: false,
      form: {
          stuId: ''
      }
    }
  },
  created() {
    let userStr = sessionStorage.getItem("user") || "{}"
    //将session取出的json数据转化为对象类型
    this.user = JSON.parse(userStr)
    this.load();
  },
  methods: {
    load() {
      request.get("/card",
          //多个参数get方式需要添加params属性
          {
            params: {
              page: this.currentPage,
              rows: this.pageSize,
            }
          }).then(res => {
        console.log(res);
        if (res.code === '0') {
          this.tableData = res.data.rows;
          this.total = res.data.total;
        }

      })
    },
    switchChange() {
      if (this.switch1 === false) {
        this.load();
      }else {
        this.loadno();
      }
    },

    handleDelete(id) {
      request.delete("/card/" + id).then(res => {
        if (res.code === '0') {
          ElMessage({
            message: '删除成功!',
            type: 'success',
          })
        } else {
          ElMessage({
            message: '删除失败!',
            type: 'error'
          })
        }
        this.load();
      });
    },
    loadno() {
      request.get("/card/no",
          //多个参数get方式需要添加params属性
          {
            params: {
              page: this.currentPage,
              rows: this.pageSize,
            }
          }).then(res => {
        console.log(res);
        if (res.code === '0') {
          this.tableData = res.data.rows;
          this.total = res.data.total;
        }

      })
    },
    updateCard() {
      this.form.stuId = this.user.userId;
      request.put("/card",this.form).then(res => {

        if (res.code === '0') {
          ElMessage({
            message: '打卡成功!',
            type: 'success',
          })
        } else {
          ElMessage({
            message: '打卡失败!',
            type: 'error'
          })
        }
        this.load();
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.load();
    },

  }
}
</script>
